<template>
  <el-card class="box-card" style="margin-bottom: 10px; padding: 10px">
    <el-form inline="true">
      <el-form-item label="一级分类">
        <el-select
          :disabled="scene === 1"
          placeholder="请选择"
          style="width: 240px"
          v-model="categoryStore.c1Id"
          @change="hanlerC1"
        >
          <el-option
            v-for="(item, index) in categoryStore.cate1List"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          :disabled="scene === 1"
          placeholder="请选择"
          style="width: 240px"
          v-model="categoryStore.c2Id"
          @change="hanlerC2"
        >
          <el-option
            v-for="(item, index) in categoryStore.cate2List"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          :disabled="scene === 1"
          placeholder="请选择"
          style="width: 240px"
          v-model="categoryStore.c3Id"
        >
          <el-option
            v-for="(item, index) in categoryStore.cate3List"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import useCategoryStore from '../../store/modules/category'
const categoryStore = useCategoryStore()
let props = defineProps(['scene'])
const getC1Cate = async () => {
  await categoryStore.getC1()
}
// 问题：在什么时候触发 下一次请求数据  监听值的变化
let hanlerC1 = () => {
  categoryStore.c2Id = ''
  // categoryStore.cate2List = []
  categoryStore.c3Id = ''
  categoryStore.cate3List = []
  categoryStore.getC2()
}

let hanlerC2 = () => {
  categoryStore.c3Id = ''
  categoryStore.getC3()
}

onMounted(() => {
  getC1Cate()
})
</script>

<style scoped lang="scss"></style>
